<template>
  <el-card style="width:98%;height: 100%; margin-top:20px ; display: flex; flex-direction: column;">
    <div style="width: 100%; margin-bottom: 20px; margin-left: 31px;">
      <el-select placeholder="请选择乘车人" style="width: 200px;margin-right: 20px;" collapse-tags v-model="searchPesonId">
        <el-option v-for="item in options" :key="item.id" :label="item.customerName" :value="item.id">
        </el-option>
      </el-select>

      <el-button type="primary" plain @click="setGetAllOrderByPersonId" :loading="loading">查询订单</el-button>

    </div>
    <el-table :data="tableData" style="width: 95%; height: 447px; margin-left: 30px;" border
      :header-cell-style="{ background: '#f0f9ff', color: '#181818', textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="margin-bottom: 10px;">
            <span class="label-span"><i class="el-icon-user"></i> 乘车人：</span>
            <span class="text-span">{{ props.row.passenger }}</span>
            <span class="label-span" style="margin-left: 190px;"><i class=" el-icon-suitcase-1"></i> 车次：</span>
            <span class="text-span">{{ props.row.trainNumberName }}</span>
          </div>
          <div>
            <span class="label-span"><i class="el-icon-date"></i> 发车日期：</span>
            <span class="text-span">{{ props.row.trainDate }}</span>
            <span class="label-span"  style="margin-left: 90px;"><i class="el-icon-s-ticket"></i> 座位类别：</span>
            <span class="text-span">{{ props.row.seatType }}</span>
            <span class="label-span"><i class="el-icon-map-location" style="margin-left: 25px;"></i> 起始终到：</span>
            <span class="text-span">{{ props.row.startStation }}</span>
            <span class="text-span">({{ props.row.startTime }})</span>
            <span style="font-weight: bolder; font-size: large; margin-left: 20px; margin-right: 20px;"> -----> </span>
            <span class="text-span">{{ props.row.arriveStation }}</span>
            <span class="text-span">({{ props.row.arriveTime }})</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index" width="80">
      </el-table-column>
      <el-table-column label="订单号" prop="orderNumber">
      </el-table-column>
      <el-table-column label="乘车人" prop="passenger">
      </el-table-column>
      <el-table-column label="价格">
        <template slot-scope="scope">
          <span style="color: #1c1917; font-weight: 600;"> {{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="orderStatus">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderStatus === 0" type="warning">未支付</el-tag>
          <el-tag v-if="scope.row.orderStatus === 1" type="success">已支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <div v-if="scope.row.orderStatus === 0">
            <el-button type="primary" size="mini" plain @click="openDialog(scope.row)" style="margin-right: 10px;">支付</el-button>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm=deleteOrder(scope.row.id)>
              <el-button slot="reference" type="warning" size="mini" plain >取消订单</el-button>
            </el-popconfirm>
          </div>
          <el-button v-if="scope.row.orderStatus === 1" type="info" size="small" style="width: 80px;"
            disabled>已支付</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="车票改签" :visible.sync="dialogVisible" width="30%">
      <div style="display: flex; flex-direction: column; justify-content: center; margin-bottom: 20px;">
        <span style="margin-left: 20px; margin-top: 10px; font-weight: bold; ">乘车人为：{{ form.passenger }}</span>
        <span style="margin-left: 20px; margin-top: 10px; font-weight: bold; ">优惠类型为：{{ form.seatType }}</span>
        <span style="margin-left: 20px; margin-top: 10px; font-weight: bold; ">票价为：￥{{ form.price }}</span>
        <el-divider></el-divider>
        <span
          style="margin-left: 20px; margin-top: 10px; margin-bottom: 5px; font-weight: bold; font-weight: bold; font-size: large; color: red;">
          实付金额为：{{ form.price }}</span>
      </div>
      <span style="margin-left: 120px;">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" :loading="updateLoading" @click="setUpdateOrderStatus(form.id)">{{ updateLoading ? '支付中...' :'确认支付'}}</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: "orderForm",

  data() {
    return {
      // 用户信息
      userInfo: '',

      loading: false,
      searchPesonId: '',
      options: [],
      listData: [],

      // 支付订单
      updateLoading: false,
      dialogVisible: false,
      form: {
        id: '',
        passenger: '',
        price: '',
        seatType: ''
      }
    };
  },

  methods: {
    // 获取当前账户所有乘客
    getAllCustomer() {
      const findForm = {
        customerUser: this.userInfo.id
      }
      this.request.post('customer/getCustomer', findForm).then(
        response => {
          if (response.data.code === 1) {
            this.options = response.data.data
            console.log(this.options);
          }
        },
        error => {
          console.log(error.message)
        }
      )
    },

    setGetAllOrderByPersonId() {
      this.loading = true
      setTimeout(() => {
        this.getAllOrderByPersonId()
      }, 1000)
    },
    // 获取订单
    getAllOrderByPersonId() {
      this.request.get("/orderFormVo/getOrderById/" + Number(this.searchPesonId)).then(
        response => {
          if (response.data.code === 1) {
            this.listData = response.data.data
            console.log(this.listData);
          }else {
            this.listData = []
            this.$message({
              message: '此乘客没有车票订单！',
              type: 'info',
              duration: 1000
            });
          }
        },
        error => {
          console.log(error.message)
        }
      ).finally(() => {
        this.loading = false
      }
      )
    },
    // 支付订单
    setUpdateOrderStatus(id) {
      this.updateLoading = true
      setTimeout(() => {
        this.updateOrderStatus(id)
      }, 1000)
    },
    updateOrderStatus(id) {
      this.request.put("/orderForm/updateOrder/" + id).then(
        response => {
          if (response.data.code === 1) {
            this.$message({
              message: '支付成功',
              type: 'success'
            });
            this.cancelDialog()
            this.getAllOrderByPersonId()
          } else {
            this.$message({
              message: '支付失败',
              type: 'error'
            });
          }
        }
      ).finally(() => {
        this.updateLoading = false
      }
      )
    },
    openDialog(form) {
      this.dialogVisible = true
      this.form.id = form.id
      this.form.passenger = form.passenger
      this.form.price = form.price
      this.form.seatType = form.seatType
    },

    cancelDialog() {
      this.dialogVisible = false
      this.form.id = ''
      this.form.passenger = ''
      this.form.price = ''
      this.form.seatType = ''
    },

    deleteOrder(orderId) {
      console.log(orderId);
      this.request.delete("/orderForm/deleteOrder" , { params: { id: orderId } }).then(
        response => {
          if (response.data.code === 1) {
            this.$message({
              message: '取消订单成功',
              type: 'success'
            });
            this.getAllOrderByPersonId()
          } else {
            this.$message({
              message: '取消订单失败',
              type: 'error'
            });
          }
        }
      )
    }
  },

  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('login_user'))
    this.getAllCustomer()
  },
  computed: {
    tableData() {
      let data = this.listData;
      let date = [];
      for (let item of data) {
        if (item.seatType === 0) {
          item.seatType = "商务座"
        } else if (item.seatType === 1) {
          item.seatType = "一等座"
        } else {
          item.seatType = "二等座"
        }
        date = item.trainDate.split("-")
        item.trainDate = date[0] + "年" + date[1] + "月" + date[2] + "日"
      }
      return data
    }
  }
}
</script>

<style scoped>
.label-span {
  margin-left: 80px;
  font-size: medium;
  color: #93c5fd;
}

.text-span {
  font-weight: bold;
}

::v-deep .el-table__empty-block {
  /* justify-content: center; */
  min-height: 380px;
}
</style>